.root {
  margin-bottom: 1em;

  border: 1px solid var(--color);

  &:global(.active) {
    outline: 4px solid var(--vd-color-success-200);
  }

  h5 {
    margin-top: 1.8rem;
  }

  :global(.ant-collapse-content) {
    border-color: var(--color);
  }
}

.panel {
  border: none !important;
  border-radius: 0 !important;
}

.header {
  display: flex;
  align-items: center;
}

.expand {
  color: var(--vd-color-gray-600) !important;
  font-size: 18px !important;

  &:global(.active) {
    color: var(--vd-color-gray-800) !important;
  }
}

.type {
  font-weight: bold;
  margin-right: var(--vd-spacing-xs);

  background-color: var(--color);
  padding: 4px 8px;
  color: white;
  border-radius: 3px;
}

.title {
  color: var(--vd-color-gray-600);
  margin-left: var(--vd-spacing-xs);
}

.name {
  font-weight: bold;
  font-family: var(--vd-font-family-mono);
  color: var(--vd-color-gray-800);
}

.table {
}

.ts {
  color: var(--vd-color-info);
  cursor: pointer;
  margin-right: 4px;
}
